<template>
  <fullScreenContainer :leftList="menuList" :showRight="false" :rightList="rightList" :centerSpan="19"
                       title="湖南省农业优势特色产业集群信息系统" type="fullScreenContainer">
    <template slot="leftContent">
      <Panel key="jdfj" v-model="tabs_value" :tabs="tabs" :isCancel="false" @change="change" height="100%">
        <div class="jdfj-box">
          <div class="jdfj-left-box" v-for="item in cygk">
            <img :src="home" alt="" srcset=""/>
            <div class="jdfj-right-box-1">
              <div class="right-top">
                <span class="number">{{ item.number }}</span>
                <span class="text">{{ item.unit }}</span>
              </div>
              <div class="right-bottom">
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <template v-if="tabs_value === '2'">
          <div class="jdfj-tz">
            <tabs1 v-model="tabs1_value" :tabs="[{ name: '投资产业链情况', value: '1' }]"></tabs1>
            <div class="jdfj-tb">
              <echartsDemo key="cyl-k" :initData="cyl" :initChart="pieChart"></echartsDemo>
            </div>
          </div>
          <div class="jdfj-tz">
            <tabs1 v-model="tabs1_value" :tabs="[{ name: '投资区域情况', value: '1' }]"></tabs1>
            <div class="jdfj-tb">
              <echartsDemo key="tzqy-k" :initData="tzqk" :initChart="barChart"></echartsDemo>
            </div>
          </div>
        </template>
        <template v-if="tabs_value === '1'">
          <div class="jdfj-tz">
            <tabs1 v-model="tabs1_value" :tabs="[{ name: '现代农业产业发展情况', value: '1' }]"></tabs1>
            <div class="jdfj-bar">
              <echartsDemo key="top" :initData="qyqyfx" :initChart="topChart"></echartsDemo>
            </div>
          </div>

          <div class="jdfj-tz">
            <tabs1 v-model="tabs1_value" :tabs="[{ name: '营收和产值情况', value: '1' }]"></tabs1>
            <div class="jdfj-box">
              <div class="jdfj-left-box" style="
                  height: 177px;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                " v-for="item in cygk1">
                <img :src="home" alt="" srcset=""/>
                <div class="jdfj-right-box-1">
                  <div class="right-top" style="justify-content: center;">
                    <span class="number">{{ item.number }}</span>
                    <span class="text">{{ item.unit }}</span>
                  </div>
                  <div class="right-bottom" style="text-align: center;">
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </Panel>
    </template>

    <template slot="fullScreenMap">
      <div class="map-page-container">
        <Map ref="Map"></Map>
      </div>
    </template>
    <template slot="centerContent">
      <map-tools @iconChange="iconChange" @projectIconChange="projectIconChange"></map-tools>
    </template>
  </fullScreenContainer>
</template>
<script>
import Map from '@/Iframe/kcgis3x.vue'
import MapTools from '@/layout/components/Center/index.vue'
import menuList, {rightList} from './menu'
import home from './home.png'
import echartsDemo from '@/echartsDemo/index.vue'
import tabs1 from '../templateBigScreen/tabs1.vue'
import pieChart from './pieChart'
import barChart from './barChart'
import box2 from '../templateBigScreen/box2.vue'
import box3 from '../templateBigScreen/box3.vue'
import topChart from '../templateBigScreen/topChart'
import {getChartData, ztyztqk} from "@/apis/bigOneIndex";
import industryLayerData from './gisData/industryLayerData'
import xzqhData from "./gisData/qxxzqh";
import projectLayerData from "./gisData/projectLayerData";

export default {
  components: {
    Map,
    MapTools,
    tabs1,
    echartsDemo,
    box2,
    box3,
  },

  data() {
    return {
      cygk1: [
        {
          number: '0',
          unit: '万元',
          name: '规模以上农产品加工业营收',
        },
        {
          number: '0:0',
          unit: '',
          name: '农产品加工业产值与农业总产值比例',
        },
      ],
      qyqyfx: [
        // {executeOorgname: '',zs: 0,},
      ],
      menuList,
      industryLayerData,
      projectLayerData,
      xzqhData,
      rightList,
      home,
      pieChart,
      barChart,
      topChart,
      tabs1_value: '1',
      tabs: [
        {
          name: '全省产业概况',
          value: '1',
        },
        {
          name: '产业项目群情况',
          value: '2',
        },
      ],
      tabs_value: '1',
      cygk: [
        {
          number: '0',
          unit: '万亩',
          name: '种植面积',
        },
        {
          number: '0',
          unit: '万吨',
          name: '一产产量',
        },
        {
          number: '0',
          unit: '家',
          name: '加工企业数量',
        },
        {
          number: '0',
          unit: '亿元',
          name: '一产产值',
        },
        {
          number: '0',
          unit: '家',
          name: '龙头企业',
        },
        {
          number: '0',
          unit: '亿元',
          name: '二产产值',
        },
      ],
      cyl: {},
      tzqk: {},
      ztyztqk: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    }
  },
  created() {
    this.getData();
  },
  methods: {
    change() {
      if (this.tabs_value == "1") {
        this.cygk[0].number = this.ztyztqk.zzmj || 0;
        this.cygk[1].number = this.ztyztqk.yccl || 0;
        this.cygk[2].number = this.ztyztqk.jgqysl || 0;
        this.cygk[3].number = this.ztyztqk.yccz || 0;
        this.cygk[4].number = this.ztyztqk.ltqy || 0;
        this.cygk[5].number = this.ztyztqk.eccz || 0;
      } else {
        this.cygk[0].number = this.ztyztqk.zzmj1 || 0;
        this.cygk[1].number = this.ztyztqk.yccl1 || 0;
        this.cygk[2].number = this.ztyztqk.jgqysl1 || 0;
        this.cygk[3].number = this.ztyztqk.yccz1 || 0;
        this.cygk[4].number = this.ztyztqk.ltqy1 || 0;
        this.cygk[5].number = this.ztyztqk.eccz1 || 0;
        this.cygk1[0].number = this.ztyztqk.ncpjgyys || 0;
        let per = ((this.ztyztqk.ncpjgycz || 0) / (this.ztyztqk.nyzcz || 1));
        this.cygk1[1].number = per.toFixed(2) + ":1";
      }
    },
    iconChange(value) {
      this.getData(value);
    },

    projectIconChange(value) {
      this.showGisLayer(value, this.projectLayerData, 1);
    },
    //iconChange
    getData(layerType) {
      this.getChartData1(layerType);
      this.getChartData2(layerType);
      this.getChartData3(layerType);
      this.getZtyztqk(layerType);
      this.showGisLayer(layerType, this.industryLayerData, 0);
    },


    showGisLayer(layerType, layerData, type) {
      this.clearGisLayer();
      if (layerType && layerData && layerData.length > 0) {
        const layerTypeArray = layerType.split(',').map(pid => parseInt(pid, 10));
        const layersToShow = layerTypeArray.map(pid => this.findLayerByPid(type, pid)).filter(layer => layer !== undefined);
        if (type === 0) {
          this.displayLayers(layersToShow);
        } else {
          this.displayProjectLayers(layersToShow)
        }
      }
    },


    findLayerByPid(type, pid) {
      const layerData = type === 0 ? this.industryLayerData : this.projectLayerData;
      return layerData.find(layer => layer.pid === pid);
    },

    displayProjectLayers(layers) {
      layers.forEach(layer => {
        let mergedPolygon = [];
        let htmlData = [];
        layer.xzqh.forEach(xzqhItem => {
          const multiPolygon = this.getMultiPolygonByCode(xzqhItem.code);
          const coordinates = multiPolygon.geometry.coordinates;
          const properties = multiPolygon.properties;
          const html = this.buildProjectIconHtml(xzqhItem.dbzp);
          htmlData.push({
            x: properties.x,
            y: properties.y,
            html: html
          })
          coordinates.forEach(coord => {
            mergedPolygon.push({
              polyArr: coord,
              style: {
                color: layer.material.polygon.color,
                alpha: layer.material.polygon.alpha
              }
            })
          });
        })
        this.addGisLayer(mergedPolygon, htmlData);
      })
    },

    buildProjectIconHtml(dbzp) {
      let resHtml = '';
      if (dbzp && dbzp.length) {
        dbzp.forEach((item, index1) => {
          resHtml += `<div class="label-container purple-background">
                    <img src="${item.icon}" alt="图标" class="icon">
                    <span class="label-text">${item.name}</span>
                  </div>`;
        });
      }
      return resHtml;
    },

    buildIndustryIconHtml(dbzp) {
      if (!dbzp || !dbzp.length) return '';
      const containerClass = 'label-container purple-background';
      const iconClass = 'label-icon2';
      const textClass = 'label-text2';
      return dbzp.map(item => {
        const textStyle = `background-color: ${item.color || '#FFF482'}`;
        return `
            <div class="${containerClass}">
              <img src="${item.icon}" alt="图标" class="${iconClass}">
              <span class="${textClass}" style="${textStyle}">${item.name}</span>
            </div>
          `;
      }).join('');
    },


    displayLayers(layers) {
      // 实现显示图层的逻辑
      layers.forEach(layer => {
        let mergedPolygon = [];
        let htmlData = [];
        layer.cyd.forEach(cydItem => {
          cydItem.xzqh.forEach(xzqh => {
            const multiPolygon = this.getMultiPolygonByCode(xzqh.code);
            const coordinates = multiPolygon.geometry.coordinates;
            const properties = multiPolygon.properties;
            const html = this.buildIndustryIconHtml(xzqh.dbzp);
            htmlData.push({
              x: properties.x,
              y: properties.y,
              html: html
            })
            coordinates.forEach(coord => {
              mergedPolygon.push(
                {
                  polyArr: coord,
                  style: {
                    color: cydItem.material.polygon.color || 'FCC152',
                    alpha: cydItem.material.polygon.alpha || 0.5
                  },
                  label: {
                    text: cydItem.name,
                    textStyle: {
                      fillColor: cydItem.material.label.fillColor || '#d31313',
                      outlineColor: cydItem.material.label.outlineColor || '#ffffff',
                    }
                  }
                })
            });
          })
        })
        this.addGisLayer(mergedPolygon, htmlData);
      });
    },

    addGisLayer(mergedPolygon, htmlData) {
      if (window.kcgis&& window.mapApi) {
        window.mapApi.addNativePolygon(mergedPolygon,htmlData);
      }
    },

    clearGisLayer() {
      if (window.kcgis&& window.mapApi) {
        window.mapApi.clearAllVectorLayer();
      }
    },


    getMultiPolygonByCode(code) {
      const feature = this.xzqhData.features.find(feature => feature.properties.code === code);
      if (feature) {
        return feature;
      } else {
        return null; // 如果找不到匹配的code，返回null
      }
    },

    getZtyztqk(layerType) {
      let params = {"layerType": layerType};
      ztyztqk(params).then(res => {
        //executeOorgname,zs
        this.ztyztqk = res.data;
        this.change();
      });
    },
    getChartData1(layerType) {
      let params = {"layerType": layerType, "chartName": "总体一张图-投资产业链情况"};
      getChartData(params).then(res => {
        //executeOorgname,zs
        this.cyl = {};
        this.cyl = this.formatChartData(res.data);
      });
    },
    getChartData2(layerType) {
      let params = {"layerType": layerType, "chartName": "总体一张图-投资区域情况"};
      getChartData(params).then(res => {
        //executeOorgname,zs
        this.tzqk = {};
        this.tzqk = this.formatChartData(res.data);

      });
    },
    getChartData3(layerType) {
      let params = {"layerType": layerType, "chartName": "总体一张图-现代农业产业发展情况"};
      getChartData(params).then(res => {
        //executeOorgname,zs
        this.qyqyfx = [];
        res.data.forEach(e => {
          var data = {"executeOorgname": e.name, "zs": e.value}
          this.qyqyfx.push(data);
        });
      });
    },
    formatChartData(data) {
      let legendData = [];
      let seriesData = [];
      let result = {};
      data.forEach(e => {
        legendData.push(e.name);
        seriesData.push({"name": e.name, "value": e.value});
      });
      result.legendData = legendData;
      result.xAxisData = legendData;
      result.seriesData = seriesData;
      return result;
    }
  },
  mounted() {
  },
}
</script>
<style scoped lang="scss">
.jdfj-bar {
  margin-top: 18px;
  height: 266px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  flex-grow: 1;
  align-self: stretch;

  z-index: 2;
}

.jdfj-box {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: 100%;
}

.jdfj-left-box {
  width: 175px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 5px 8px;
  gap: 16px;

  background: linear-gradient(180deg,
    rgba(59, 214, 172, 0.1) 0%,
    rgba(59, 214, 172, 0) 100%);

  box-sizing: border-box;
  border: 1px solid rgba(124, 181, 168, 0.34);

  z-index: 0;

  .jdfj-right-box-1 {
    .right-top {
      height: 24px;
      opacity: 1;

      /* 自动布局 */
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0px;
      gap: 8px;

      z-index: 0;

      .number {
        font-family: DIN;
        font-size: 24px;
        font-weight: bold;
        line-height: 24px;
        letter-spacing: 0em;

        font-variation-settings: 'opsz' auto;
        background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }

      .text {
        opacity: 0.8;
        font-family: 思源黑体;
        font-size: 14px;
        font-weight: 350;
        line-height: 14px;
        letter-spacing: 0em;

        /* 纯白 */
        color: #ffffff;

        z-index: 1;
      }
    }

    .right-bottom {
      height: 21px;
      opacity: 1;

      font-family: 思源黑体;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-transform: uppercase;
      letter-spacing: 1px;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      /* 文字白 */
      color: #ffffff;

      z-index: 1;
      margin-top: 10px;
    }
  }
}

.jdfj-tz {
  margin-top: 32px;
}

.jdfj-tb {
  width: 100%;
  height: 240px;
}

.jdfl {
  align-items: center;

  .right {
    // display: flex;
    // flex-direction: column;
    // gap: 20px;
    margin-top: 15px;

    .bottom {
      margin-top: 20px;
    }
  }
}

.jdfl-two {
  margin-top: 30px;
}

.flex1 {
  margin-top: 20px;
}

.tz-box {
  width: 174px;
  height: 176px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  gap: 16px;
  flex-grow: 1;
  align-self: stretch;

  background: linear-gradient(180deg,
    rgba(59, 214, 172, 0.1) 0%,
    rgba(59, 214, 172, 0) 100%);

  z-index: 0;
}
</style>
